<template>
  <div>
    <div class="content">
      <el-form ref="form" :model="ruleForm" label-width="100px">
        <el-form-item label="详情：">
          <Editor ref="editor" :content="content" class="editor" @catchData="handleCatchData" />
        </el-form-item>
        <el-form-item label="是否上架：">
          <el-switch
            v-model="value"
            @change="handleChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <el-button class="prev" @click="prev">上一步，编辑属性价格</el-button>
      <el-button class="finish" @click="finish">完成</el-button>
    </div>
  </div>
</template>
<script>
import Editor from '@/common/editor'
import { addGoodsStepTwo, getGoodsStepTwo } from '@/api/goods'
import { mapGetters } from 'vuex'
const ERR_OK = 200
export default {
  components: {
    Editor
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        putaway: 1,
        introduce: ''
      },
      value: true,
      content: ''
    }
  },
  computed: {
    ...mapGetters(['edit_type', 'goods_id'])
  },
  watch: {
    content(newVal) {
      this.$refs.editor.setContent()
    }
  },
  mounted() {
    if (this.edit_type) {
      this._getGoodsStepTwo(this.goods_id)
    }
  },
  methods: {
    handleCatchData(content) {
      console.log(content)
      this.ruleForm.introduce = content
    },
    handleChange(val) {
      console.log(val)
      if (val) {
        this.ruleForm.putaway = 1
      } else {
        this.ruleForm.putaway = 0
      }
    },
    prev() {
      this.$emit('prev')
      window.scrollTo(0, 0)
    },
    finish() {
      this.ruleForm.id = this.id
      this._addGoodsStepTwo(this.ruleForm)
        .then(() => {
          this.$emit('finish')
        })
        .catch(err => {
          console.log(err)
        })
    },
    _addGoodsStepTwo(parmas) {
      return new Promise((resolve, reject) => {
        addGoodsStepTwo(parmas)
          .then(res => {
            this._toastSuccess(res.data.message)
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _getGoodsStepTwo(id) {
      getGoodsStepTwo(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.value = res.data.is_putaway === 1
            this.ruleForm.introduce = res.data.introduce
            this.content = res.data.introduce
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _toastSuccess(message) {
      this.$message({
        message: message,
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 50px;
  .finish,
  .prev {
    display: block;
    width: 200px;
    height: 48px;
    border-radius: 6px;
    background-color: rgba(64, 158, 255, 1);
    text-align: center;
    color: #ffff;
  }
  .prev {
    background: #dddddd;
    border: 1px solid rgba(221, 221, 221, 1);
    margin-right: 13px;
  }
}
.content {
  border-bottom: 1px solid #eee;
  .editor{
    height: 500px;
  }
}
</style>
